<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>京东轮播图</title>
	<script src="jquery-1.12.3.min.js"></script>
	<style>
		*{
			margin:0;
			padding: 0;
			text-align: center;
		}
		div{
			width: 500px;
			height: 500px;
			position: relative;
			margin:200px auto;
		}
		img{
			position: absolute;
			top: 0;
			left: 0;
			display: none;
		}
		.show{
			display: block;
		}
		span{
			width: 30px;
			height: 50px;
			text-align: center;
			line-height: 50px;
			background-color: black;
			opacity: 0.4;
			position: absolute;
			top: 46%;
			left: 0;
			z-index: 10;
			color: white;
			color: white;
			cursor: pointer;
		}
		span:hover{
			opacity: 0.8;
		}
		.toRight{
			left: 560px;
		}
		ul{
			width: 200px;
			height: 50px;
			position: absolute;
			top: 86%;
			left: 10%;
		}
		ul li{
			width: 8px;
			height: 8px;
			border:2px solid #ccc;
			line-height: 48px;
			text-align: center;
			list-style: none;
			float: left;
			border-radius: 50%;
			cursor: pointer;
			margin-right: 5px;
		}
		.active{
			border:2px solid #ccc;
			background-color: white;
			width: 10px;
			height: 10px;
		}
	</style>
</head>
<body>
	<div class="area">
		<span>&lt;</span>
		<span class="toRight">&gt;</span>
		<img class="show" src="https://m.360buyimg.com/babel/jfs/t27715/199/135476086/95691/4348d27e/5b865d36Nc2dc409f.jpg" alt="">
		<img src="https://img1.360buyimg.com/pop/jfs/t1/2489/23/101/109996/5b8f824eE8302a8cb/555803994c21d42f.jpg" alt="">
		<img src="https://img1.360buyimg.com/pop/jfs/t27142/215/339514008/96664/16a44264/5b8e2fa0N6dbf15f8.jpg" alt="">
		<img src="https://img1.360buyimg.com/pop/jfs/t25432/286/1280377244/96101/3074856/5b90f02bNd941cc3b.jpg" alt="">
		<img src="https://img1.360buyimg.com/pop/jfs/t1/2602/37/3256/144285/5b98cbfeE0b75f96d/3bbbf4859ceb0baa.jpg" alt="">
		<img src="https://img1.360buyimg.com/pop/jfs/t25594/291/1284431856/108218/947fb436/5b8fa660N62fe6fc4.jpg" alt="">
		<img src="https://m.360buyimg.com/babel/jfs/t1/2057/36/608/87611/5b9211ecEe26cd62f/f557b051553c9a35.jpg" alt="">
		<ul>
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	
	<script>
		$(function(){
			var x=0;
			$("span").click(function(){
				clearInterval(t);
				if($(this).index()==0){
					if (x==0) {
						x=6;
					}else{
						x--;
					}
				}else{
					if (x==6) {
						x=0;
					}else{
						x++;
					}
				}
				$("img").eq(x).siblings("img").fadeOut(10);
				$("img").eq(x).fadeIn(500);
				$("li").removeClass("active");
				$("li").eq(x).addClass("active");
			})
			$("li").mouseenter(function(){
				clearInterval(t);
				var y=$(this).index();
				$("li").removeClass("active");
				$(this).addClass("active");
				x=y;
				$("img").eq(y).siblings("img").fadeOut(10);
				$("img").eq(y).fadeIn(500)
			})
			$(".area").mouseenter(function(){
				clearInterval(t);
			})
			$(".area").mouseleave(function(){
				clearInterval(t);
				var j=0;
				var n=setInterval(function(){
					if (j==3) {
						t= setInterval(picChange,2000);
						clearInterval(n);
						j=0;
					}else{
						j++;
						clearInterval(t);
					}
					console.log(j)
				},1000)
			});
			function picChange(){
				x==3?x=0:x++;
				$("img").eq(x).siblings("img").fadeOut(10);
				$("img").eq(x).fadeIn(500);
				$("li").removeClass("active");
				$("li").eq(x).addClass("active");
			}
			var t= setInterval(picChange,2000);

		})
	</script>
</body>
</html>